<template>
  <div class="login">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <p class="tittle">教务管理系统</p>
        <el-form-item label="用户名" prop="name">
          <el-input prefix-icon="el-icon-user-solid" type="text" v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input prefix-icon="el-icon-lock" type="password" v-model="ruleForm.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="sumBtn" type="primary" :plain="false" @click="submitForm('ruleForm')">登录</el-button>
        </el-form-item>
      </el-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
        ruleForm: {
          name: '',
          password: '',
        },
        rules: {
          name: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 4, max: 7, message: '长度在 4 到 7 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 4, max: 7, message: '长度在 4 到 7 个字符', trigger: 'blur' }
          ],
        }
      };
  },
   methods: {
      open1() {
      },
     submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$message({
              message: '登录成功',
              type: 'success',
              duration:1000,
            });
            this.$router.push("/Home");
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
  .login{
    position:relative;
    box-sizing: border-box;
    width:100vw;
    height:100vh;
    padding: 1px;
    background:url("../assets/img/bgc.jpg") center no-repeat;
      .tittle{
        margin:10% 0 8% -14px;
        font-size:45px;
        color:#8dd68c;
      }
      .demo-ruleForm{
        position:absolute;
        top:90px;
        left:0;
        bottom:0;
        right:0;
        margin:auto;
        width:650px;
        height:400px;
        border-radius: 4%;
        box-shadow: 3px 3px 8px;
        margin-top:100px;
        background-color: rgba(164,216,236,0.5);
          .el-form-item{
            margin-left:40px;
          }
          input{
            position:relative;
            right:12%;
            width:400px;
            text-indent: 10px;
          }
          label{
            float:left;
            font-size:24px;
            color:#8dd68c;
          }
          .sumBtn{
            position:absolute;
            left:25%;
            font-size: 16px;
            width:100px;
            bottom:-60px;
          }
      }
  }
</style>
